<template>
    <div class="health-assessment">
        <search-condition @search="search" @resert="resert" :isShowMoreSeach="false"> </search-condition>
        <div class="article">
            <div class="left">
                <div class="left-top">
                    <div class="list-title">整机</div>
                    <div class="all-device">
                        <div class="all-device-top">
                            <div class="health">
                                <div class="all-device-health"></div>
                            </div>
                            <div class="bar"></div>
                        </div>
                        <div class="inline" ref="inlineRef">
                            <div class="line"></div>
                            <div class="choose" style="font-size: 14px; left: 80px; top: 5px">
                                <div :class="{ 'choose-active': chooseItemIndex === 1 }" @click="itemChoose(1)">年度</div>
                                <div class="point"></div>
                                <div :class="{ 'choose-active': chooseItemIndex === 3 }" @click="itemChoose(3)">季度</div>
                                <div class="point"></div>
                                <div :class="{ 'choose-active': chooseItemIndex === 2 }" @click="itemChoose(2)">月度</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="left-bottom">
                    <div class="list-title">零部件、易损易耗件</div>
                    <div class="rank">
                        <div class="sensor-progress" v-for="(item, index) in partData">
                            <div class="sensor-no">
                                <div class="label">
                                    <div class="no">{{ index + 1 }}</div>
                                    <span>{{ item.name }}</span>
                                </div>
                                <el-progress :stroke-width="10" :percentage="item.statusValue" class="progress" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="list-title">起升机构</div>
                <div class="reel-shaft">
                    <div class="reel-shaft-item" v-for="item in completions" :style="{ width: `calc(100% / ${completions.length})` }">
                        <div class="reel-shaft-title">{{ item.name }}</div>
                        <div class="reel-shaft-item-in" />
                    </div>
                </div>
                <div class="reel-shaft-bar">
                    <div class="reel-shaft-bar-item" v-for="item in loadOptions" :style="{ width: `calc(100% / ${loadOptions.length})` }" />
                </div>
                <div class="reel-shaft-one">
                    <div class="reel-shaft-history"></div>
                    <div class="choose" style="font-size: 14px; left: 80px; top: 5px">
                        <div :class="{ 'choose-active': rightChooseItemIndex === 1 }" @click="itemRightChoose(1)">年度</div>
                        <div class="point"></div>
                        <div :class="{ 'choose-active': rightChooseItemIndex === 2 }" @click="itemRightChoose(2)">季度</div>
                        <div class="point"></div>
                        <div :class="{ 'choose-active': rightChooseItemIndex === 3 }" @click="itemRightChoose(3)">月度</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import searchCondition from "@/components/searchCondition.vue";
import { formConfig, completion, loadOption, historyOption, reelShaftHistoryOption } from "./config.js";
import { reactive, provide, watch, ref, nextTick } from "vue";
import echarts from "@/echarts";
import { useChangeColor } from "@/hooks/useChangeColor.js";
import { getequipmentarealocationlist } from "@/service/api/equipmentManagement.js";
import {
    gethistorybycompletemachinehealth,
    gettodaycompletemachinehealth,
    getstatisticsoperatingmodeload,
    getbasicsequipmentcodelist,
    gethistorybyhealth,
    gettodaymachinehealth
} from "@/service/api/healthAssessment.js";
import { getbasicsequipmentnamelist } from "@/service/api/faultDetection.js";
const { anotherColor, bgColor } = useChangeColor();
const partData = ref([]);
const completions = ref([]);
const formData = reactive({ location: "", equipmentCode: "" });
const loadOptions = ref([]);
const chooseItemIndex = ref(1);
const rightChooseItemIndex = ref(1);
const inlineRef = ref(null);
let isOnce = false;
const itemChoose = (index) => {
    chooseItemIndex.value = index;
    gethistorybycompletemachinehealth({ location: formData.location, evaluateObject: "整机", equipmentCode: formData.equipmentCode, statisticsType: index }).then((res) => {
        if (res.code === 200) {
            historyOption.xAxis.data = res.data.dateValue;
            historyOption.series[0].data = res.data.healthValue;
            initEcharts(".line", historyOption);
        }
    });
};
const itemRightChoose = (index) => {
    rightChooseItemIndex.value = index;
    gethistorybyhealth({ location: 2, equipmentCode: formData.equipmentCode, statisticsType: index }).then((res) => {
        if (res.code === 200) {
            if (!res.data.length) return;
            reelShaftHistoryOption.xAxis.data = res.data[0].dateValue;
            for (let index = 0; index < res.data.length; index++) {
                reelShaftHistoryOption.legend.data.push(res.data[index].name);
            }
            reelShaftHistoryOption.series = res.data.map((item) => ({
                name: item.name,
                data: item.healthValue,
                type: "line",
                lineStyle: {
                    color: item.color
                },
                symbol: "none"
            }));
            initEcharts(".reel-shaft-history", reelShaftHistoryOption);
        }
    });
};
watch(
    () => formData.location,
    (news) => {
        if (isOnce) {
            formData.equipmentCode = "";
            formConfig.value[1].options = [];
            formConfig.value[2].options = [];
            getbasicsequipmentcodelist({ area: news }).then((res) => {
                if (res.code === 200) {
                    formConfig.value[1].options = res.data.map((item) => ({ label: item.name, value: item.value }));
                }
            });
            getbasicsequipmentnamelist({ area: news }).then((res) => {
                if (res.code === 200) {
                    formConfig.value[2].options = res.data.map((item) => ({ label: item.name, value: item.value }));
                }
            });
        }
    }
);
getequipmentarealocationlist().then((res) => {
    if (res.code === 200) {
        formConfig.value[0].options = res.data.map((item) => ({ label: item.name, value: item.value }));
        isOnce = true;
        formData.location = formConfig.value[0].options[0].value;
        getbasicsequipmentcodelist({ area: formData.location }).then((res) => {
            if (res.code === 200) {
                formConfig.value[1].options = res.data.map((item) => ({ label: item.name, value: item.value }));
                formData.equipmentCode = formConfig.value[1].options[0]?.value;
                data();
            }
        });
        getbasicsequipmentnamelist({ area: formData.location }).then((res) => {
            if (res.code === 200) {
                formConfig.value[2].options = res.data.map((item) => ({ label: item.name, value: item.value }));
            }
        });
    }
});

const data = () => {
    gethistorybycompletemachinehealth({ location: 1, evaluateObject: "整机", equipmentCode: formData.equipmentCode, statisticsType: 1 }).then((res) => {
        if (res.code === 200) {
            historyOption.xAxis.data = res.data.dateValue;
            historyOption.series[0].data = res.data.healthValue;
            const lineEl = document.querySelector(".line");
            echarts.dispose(lineEl);
            echarts.init(lineEl).setOption(historyOption);
        }
    });
    gettodaycompletemachinehealth({ location: 3, equipmentCode: formData.equipmentCode }).then((res) => {
        if (res.code === 200) {
            partData.value = res.data;
        }
    });
    gettodaycompletemachinehealth({ location: 2, equipmentCode: formData.equipmentCode }).then((res) => {
        function getColor(statusValue) {
            let color = "";
            let subColor = "";
            if (statusValue >= 0 && statusValue <= 33) {
                color = "#ff0000";
                subColor = "#0B2432";
            } else if (statusValue <= 66 && statusValue) {
                color = "#ffff00";
                subColor = "#324B32";
            } else {
                color = "#95cd21";
                subColor = "#244436";
            }
            return { color, subColor };
        }
        if (res.code === 200) {
            completions.value = res.data.map((item) => ({
                name: item.name,
                tooltip: {
                    show: false
                },
                series: [
                    {
                        type: "pie",
                        radius: ["100%", "80%"],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: "center",
                            formatter: () => [`{a|${item.statusValue}%}`, `{b|健康度}`].join("\n"),
                            rich: {
                                a: {
                                    color: getColor(item.statusValue)?.color,
                                    fontSize: "14px",
                                    height: "30"
                                },
                                b: {
                                    color: "#C5D8FF",
                                    fontSize: "14px"
                                }
                            }
                        },
                        data: [
                            { value: item.statusValue, itemStyle: { color: getColor(item.statusValue)?.color } },
                            { value: 100 - item.statusValue, itemStyle: { color: getColor(item.statusValue)?.subColor } }
                        ],
                        emphasis: {
                            disabled: true
                        }
                    }
                ]
            }));
            loadOptions.value = res.data.map((item) => ({
                color: ["#4BA6DD"],
                title: {
                    text: "载荷图谱",
                    left: "5%",
                    top: "0",
                    textStyle: {
                        color: "#C5D8FF",
                        fontSize: 16,
                        fontWeight: "normal"
                    }
                },

                grid: {
                    left: 10,
                    top: 50,
                    bottom: 20
                },
                xAxis: {
                    type: "category",
                    name: "(t)",
                    nameTextStyle: {
                        verticalAlign: "bottom",
                        lineHeight: -20
                    },
                    nameGap: 0,
                    data: item.dateValue,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        fontSize: 10
                    }
                },
                yAxis: {
                    show: false,
                    type: "value"
                },
                series: [
                    {
                        type: "bar",
                        barWidth: 16,
                        data: item.healthValue,
                        showBackground: true,
                        label: {
                            show: true,
                            color: "#999",
                            position: "top"
                        },
                        backgroundStyle: {
                            color: "#1A435C"
                        }
                    }
                ]
            }));
            nextTick(() => {
                document.querySelectorAll(".reel-shaft-item-in").forEach((item, index) => {
                    echarts.dispose(item);
                    echarts.init(item).setOption(completions.value[index]);
                });
                document.querySelectorAll(".reel-shaft-bar-item").forEach((item, index) => {
                    echarts.dispose(item);
                    echarts.init(item).setOption(loadOptions.value[index]);
                });
            });
        }
    });
    getstatisticsoperatingmodeload({ location: 1, evaluateObject: "整机", equipmentCode: formData.equipmentCode, statisticsType: 1 }).then((res) => {
        if (res.code === 200) {
            loadOption.xAxis.data = res.data.dateValue;
            loadOption.series[0].data = res.data.healthValue;
            const barEl = document.querySelector(".bar");
            echarts.dispose(barEl);
            echarts.init(barEl).setOption(loadOption);
        }
    });
    gethistorybyhealth({ location: 2, equipmentCode: formData.equipmentCode, statisticsType: 1 }).then((res) => {
        if (res.code === 200) {
            reelShaftHistoryOption.xAxis.data = res.data[0].dateValue;
            for (let index = 0; index < res.data.length; index++) {
                reelShaftHistoryOption.legend.data.push(res.data[index].name);
            }
            reelShaftHistoryOption.series = res.data.map((item) => ({
                name: item.name,
                data: item.healthValue,
                type: "line",
                lineStyle: {
                    color: item.color
                },
                symbol: "none"
            }));
            const reelShaftHistoryEl = document.querySelector(".reel-shaft-history");
            echarts.dispose(reelShaftHistoryEl);
            echarts.init(reelShaftHistoryEl).setOption(reelShaftHistoryOption);
        }
    });
    gettodaymachinehealth({ location: 1, equipmentCode: formData.equipmentCode }).then((res) => {
        if (res.code === 200) {
            if (res.data.statusValue >= 0 && res.data.statusValue <= 33) {
                completion.series[0].data[0].itemStyle.color = "#ff0000";
                completion.series[0].data[1].itemStyle.color = "#0B2432";
                completion.series[0].label.rich.a.color = "#ff0000";
            } else if (res.data.statusValue <= 66 && res.data.statusValue > 33) {
                completion.series[0].data[0].itemStyle.color = "#ffff00";
                completion.series[0].data[1].itemStyle.color = "#324B32";
                completion.series[0].label.rich.a.color = "#ffff00";
            } else {
                completion.series[0].data[0].itemStyle.color = "#95cd21";
                completion.series[0].data[1].itemStyle.color = "#244436";
                completion.series[0].label.rich.a.color = "#95cd21";
            }
            completion.series[0].label.formatter = () => [`{a|${res.data.statusValue}%}`, `{b|健康度}`].join("\n");
            completion.series[0].data[0].value = res.data.statusValue;
            completion.series[0].data[1].value = 100 - res.data.statusValue;
            console.log(completion);
            const el = document.querySelector(".all-device-health");
            echarts.dispose(el);
            echarts.init(el).setOption(completion);
        }
    });
};
function initEcharts(el, option) {
    console.log(1);
    nextTick(() => {
        document.querySelectorAll(el).forEach((item, index) => {
            echarts.getInstanceByDom(item).clear();
            echarts.getInstanceByDom(item).resize({ animation: { duration: 1 } });
            echarts.getInstanceByDom(item).setOption(option);
        });
    });
}
provide("formData", formData);
provide("formConfig", formConfig);
provide("layout", { xs: 6, sm: 6, md: 6, lg: 6, xl: 6 });

const resert = () => {
    Object.keys(formData).forEach((key) => (formData[key] = ""));
};
const search = () => {
    if (!formData.equipmentCode) {
        ElMessage.error("请选择设备");
        return;
    }
    chooseItemIndex.value = 1;
    rightChooseItemIndex.value = 1;
    data();
};
</script>

<style lang="less" scoped>
.health-assessment {
    height: 100%;
    .choose {
        position: absolute;
        display: flex;
        align-items: center;
        color: #c5d8ff;
        & > div:not(.point) {
            cursor: pointer;
        }
        .point {
            margin: 0 16px;
            width: 4px;
            height: 4px;
            background: #c5d8ff;
            border-radius: 50%;
        }
    }
    .choose-active {
        color: #4ba6dd;
    }
    .resert {
        width: 106px;
        border: 1px solid v-bind(anotherColor);
        color: v-bind(anotherColor);
        background-color: v-bind(bgColor);
    }
    .article {
        display: flex;
        box-sizing: border-box;
        height: calc(100% - 92px);
        .health {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 196px;
        }
        .bar {
            flex: 1;
            height: 160px;
        }
        .left,
        .right {
            width: 50%;
            .list-title {
                color: #f2f4f5;
                font-size: 16px;
                font-weight: 600;
            }
        }
        .left {
            .left-top,
            .left-bottom {
                padding: 17px;
                background-color: #0e2b3d;
                .rank {
                    .sensor-progress {
                        display: flex;
                        align-items: center;
                        margin-top: 24px;
                        &:first-child {
                            margin-top: 17px;
                        }
                        .sensor-no {
                            display: flex;
                            margin-top: 3px;
                            width: 100%;
                            .label {
                                display: flex;
                                align-items: center;
                                margin-right: 10px;
                                font-size: 14px;
                                color: #4ba6dd;
                                .no {
                                    width: 20px;
                                    height: 19px;
                                    margin-right: 10px;
                                    line-height: 19px;
                                    text-align: center;
                                    background: url("@/assets/image/healthAssessment/polygon.png") 100% no-repeat;
                                }
                            }
                            .progress {
                                flex: 1;
                                :deep(.el-progress-bar__inner) {
                                    background: linear-gradient(90deg, #0065b2 0%, #009ed9 100%);
                                }
                                :deep(.el-progress-bar__outer) {
                                    background: #0a4d6a;
                                }
                                :deep(.el-progress__text) {
                                    margin-left: 10px;
                                    color: #4ba6dd;
                                }
                            }
                        }
                    }
                }
            }
            .left-top {
                box-sizing: border-box;
                margin-bottom: 8px;
                height: calc(60% - 8px);
                .all-device {
                    height: calc(100% - 20px);
                    .all-device-top {
                        display: flex;
                        width: 100%;
                        .all-device-health {
                            width: 90px;
                            height: 90px;
                        }
                    }
                    .inline {
                        position: relative;
                        height: calc(100% - 160px);
                        .line {
                            height: calc(100% - 0px);
                        }
                    }
                }
            }
            .left-bottom {
                box-sizing: border-box;
                height: 40%;
            }
        }
        .right {
            box-sizing: border-box;
            padding: 16px;
            margin-left: 16px;
            height: 100%;
            background-color: #0e2b3d;

            .reel-shaft {
                display: flex;
                .reel-shaft-title {
                    font-size: 16px;
                    font-weight: 600;
                    color: #c5d8ff;
                    margin-bottom: 5px;
                }
                .reel-shaft-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    height: 140px;
                    .reel-shaft-item-in {
                        width: 90px;
                        height: 90px;
                    }
                }
            }
            .reel-shaft-bar {
                display: flex;
                .reel-shaft-bar-item {
                    height: 200px;
                }
            }
            .reel-shaft-one {
                height: calc(100% - 380px);
                position: relative;
                margin-top: 20px;
                .reel-shaft-history {
                    height: calc(100% - 0px);
                }
            }
        }
    }
}
</style>
